{{#outside-click onOutsideClick=(action "hide")}}
  {{input
    disabled=(or readOnly asyncContent.loading)
    class=(concat "form-control input-search search " class " " inputClass)
    placeholder=placeholder
    type="text"
    autocomplete="off"
    value=filter
    key-up=(action "search")
  }}
  {{#if showOptions}}
    <section
      class={{concat optionsClass " searchable-options"}}
      style={{optionsMaxHeightCss}}
    >
      {{#if prompt}}
        <div
          class="searchable-option searchable-prompt"
          onmouseenter={{action "mouseEnter"}}
          onmouseleave={{action "mouseLeave"}}
          {{action "selectPrompt"}}
        >
          {{#unless value}}
            <i class="icon icon-check"></i>
          {{/unless}}
          {{#if localizedPrompt}}
            {{t prompt}}
          {{else}}
            {{prompt}}
          {{/if}}
        </div>
      {{/if}}
      {{#if prefix}}
        {{yield this "prefix"}}
      {{/if}}
      {{#if loading}}
        <div class="text-muted no-match">
          <i class="icon icon-spinner icon-spin"></i>
          {{t "generic.loading"}}
        </div>
      {{else if showMessage}}
        <div class="text-muted no-match">
          {{t "searchableSelect.noOptions"}}
        </div>
      {{else}}
        {{#each unGroupedContent as |item idx|}}
          {{#if item.disabled}}
            <div class="searchable-option disabled">
              {{#if (eq value (get item optionValuePath))}}
                <i class="icon icon-check"></i>
              {{/if}}
              {{#if showOptionIcon}}
                <img
                  width="32"
                  height="32"
                  alt="logo"
                  src="{{item.imgUrl}}"
                  class="p-5"
                  style="margin-left:-5px"
                />
              {{/if}}
              {{#if item.custom}}
                {{get item optionLabelPath}}
              {{else if localizedLabel}}
                {{t (get item optionLabelPath)}}
              {{else if localizedHtmlLabel}}
                {{t (get item optionLabelPath) htmlSafe=true}}
              {{else if customLabel}}
                {{yield item}}
              {{else}}
                {{get item optionLabelPath}}
              {{/if}}
            </div>
          {{else}}
            <div
              class="searchable-option"
              onmouseup={{action "selectUnGroupedItem" idx}}
              onmouseenter={{action "mouseEnter"}}
              onmouseleave={{action "mouseLeave"}}
            >
              {{#if (eq value (get item optionValuePath))}}
                <i class="icon icon-check"></i>
              {{/if}}
              {{#if showOptionIcon}}
                <img
                  width="32"
                  height="32"
                  alt="logo"
                  src="{{item.imgUrl}}"
                  class="p-5"
                  style="margin-left:-5px"
                />
              {{/if}}
              {{#if item.custom}}
                {{get item optionLabelPath}}
              {{else if localizedLabel}}
                {{t (get item optionLabelPath)}}
              {{else if localizedHtmlLabel}}
                {{t (get item optionLabelPath) htmlSafe=true}}
              {{else if customLabel}}
                {{yield item}}
              {{else}}
                {{get item optionLabelPath}}
              {{/if}}
            </div>
          {{/if}}
        {{/each}}
        {{#each groupedContent as |group|}}
          <div class="searchable-group">
            <div class="group-label">
              {{group.group}}
            </div>
            {{#each group.options as |item idx|}}
              <div
                class="searchable-option"
                onmouseup={{action "selectGroupedItem" group.options idx}}
                onmouseenter={{action "mouseEnter"}}
                onmouseleave={{action "mouseLeave"}}
              >
                {{#if (eq value (get item optionValuePath))}}
                  <i class="icon icon-check"></i>
                {{/if}}
                {{#if item.custom}}
                  {{get item optionLabelPath}}
                {{else if customLabel}}
                  {{yield item}}
                {{else if localizedLabel}}
                  {{t (get item optionLabelPath)}}
                {{else if localizedHtmlLabel}}
                  {{t (get item optionLabelPath) htmlSafe=true}}
                {{else}}
                  {{get item optionLabelPath}}
                {{/if}}
              </div>
            {{/each}}
          </div>
        {{/each}}
      {{/if}}
      {{#if suffix}}
        {{yield this "suffix"}}
      {{/if}}
    </section>
  {{/if}}
{{/outside-click}}
<i class="icon icon-spinner icon-spin"></i>